<template>
  <div class="avatar-debug">
    <h2>头像调试页面</h2>
    
    <!-- 当前医生信息 -->
    <div class="debug-section">
      <h3>当前医生信息</h3>
      <pre>{{ JSON.stringify(doctorInfo, null, 2) }}</pre>
    </div>
    
    <!-- 头像URL测试 -->
    <div class="debug-section">
      <h3>头像URL测试</h3>
      <div class="url-test">
        <label>测试头像路径:</label>
        <input v-model="testAvatarPath" placeholder="输入头像路径" />
        <button @click="testAvatarUrl">测试URL</button>
      </div>
      <div class="result">
        <p><strong>生成的URL:</strong> {{ generatedUrl }}</p>
        <img v-if="generatedUrl" :src="generatedUrl" @error="onImageError" @load="onImageLoad" class="test-image" />
      </div>
    </div>
    
    <!-- 模拟API响应测试 -->
    <div class="debug-section">
      <h3>模拟API响应测试</h3>
      <div class="api-test">
        <button @click="simulateApiResponse">模拟API响应</button>
        <div class="result">
          <p><strong>模拟响应:</strong></p>
          <pre>{{ JSON.stringify(simulatedResponse, null, 2) }}</pre>
        </div>
      </div>
    </div>
    
    <!-- 实际头像显示 -->
    <div class="debug-section">
      <h3>实际头像显示</h3>
      <div class="avatar-display">
        <img 
          :src="avatarUrlComputed" 
          @error="onAvatarError" 
          @load="onAvatarLoad"
          class="avatar-image"
          alt="医生头像"
        />
        <p><strong>当前头像URL:</strong> {{ avatarUrlComputed }}</p>
      </div>
    </div>
    
    <!-- 手动设置头像 -->
    <div class="debug-section">
      <h3>手动设置头像</h3>
      <div class="manual-set">
        <input v-model="manualAvatarUrl" placeholder="输入完整头像URL" />
        <button @click="setManualAvatar">设置头像</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { getAvatarUrl } from '@/utils/avatarUtils'
import { ElMessage } from 'element-plus'

// 医生信息
const doctorInfo = ref({})

// 测试相关
const testAvatarPath = ref('avatar/20250902161034_eee0b55b.jpg')
const generatedUrl = ref('')
const simulatedResponse = ref({})

// 手动设置
const manualAvatarUrl = ref('')

// 计算属性
const avatarUrlComputed = computed(() => {
  return getAvatarUrl(doctorInfo.value)
})

// 测试头像URL
const testAvatarUrl = () => {
  generatedUrl.value = getAvatarUrl(testAvatarPath.value)
}

// 模拟API响应
const simulateApiResponse = () => {
  // 模拟后端返回的响应格式
  simulatedResponse.value = {
    code: 200,
    message: "图片上传成功",
    data: {
      filePath: "avatar/20250902161034_eee0b55b.jpg",
      url: "/picture/avatar/20250902161034_eee0b55b.jpg"
    }
  }
  
  // 测试URL处理
  const testUrl = simulatedResponse.value.data?.url || simulatedResponse.value.data?.filePath
  console.log('模拟API响应测试:', {
    original: simulatedResponse.value.data,
    extractedUrl: testUrl,
    processedUrl: getAvatarUrl(testUrl)
  })
}

// 图片加载事件
const onImageLoad = (event) => {
  console.log('图片加载成功:', event.target.src)
  ElMessage.success('图片加载成功')
}

const onImageError = (event) => {
  console.log('图片加载失败:', event.target.src)
  ElMessage.error('图片加载失败')
}

const onAvatarLoad = (event) => {
  console.log('头像加载成功:', event.target.src)
}

const onAvatarError = (event) => {
  console.log('头像加载失败:', event.target.src)
  if (event.target && event.target.src !== '/default-avatar.png') {
    event.target.src = '/default-avatar.png'
  }
}

// 手动设置头像
const setManualAvatar = () => {
  if (manualAvatarUrl.value) {
    doctorInfo.value.avatar = manualAvatarUrl.value
    localStorage.setItem('doctorInfo', JSON.stringify(doctorInfo.value))
    ElMessage.success('头像已设置')
  }
}

// 组件挂载时加载医生信息
onMounted(() => {
  const storedInfo = localStorage.getItem('doctorInfo')
  if (storedInfo) {
    try {
      doctorInfo.value = JSON.parse(storedInfo)
    } catch (error) {
      console.error('解析医生信息失败:', error)
    }
  }
  
  // 自动测试当前头像路径
  testAvatarUrl()
})
</script>

<style scoped>
.avatar-debug {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.debug-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
}

.debug-section h3 {
  margin-top: 0;
  color: #303133;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 10px;
}

.url-test, .manual-set {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}

.url-test input, .manual-set input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.url-test button, .manual-set button {
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.url-test button:hover, .manual-set button:hover {
  background-color: #337ecc;
}

.result {
  margin-top: 15px;
  padding: 10px;
  background-color: #f0f9ff;
  border-radius: 4px;
}

.test-image, .avatar-image {
  max-width: 200px;
  max-height: 200px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-top: 10px;
}

pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}

.avatar-display {
  text-align: center;
}
</style>
